<template>
  <div class="common-layout">
    <el-container style="height: calc(100vh - 40px); ">
      <el-header style="background-color: #f5f7fa; border-bottom: 1px solid #ebeef5;">
        <h2 style="line-height: 60px;margin: 0;">简历信息填写</h2>
      </el-header>
      
      <el-container>
        <el-aside width="15vw" style="background-color: #fafafa; min-width: 200px;">
          <el-menu
            :default-active="activeMenu"
            class="side-menu"
            @select="handleMenuSelect">
            <el-menu-item 
              v-for="item in menuItems"
              :key="item.value"
              :index="item.value">
              {{ item.label }}
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-container>
          <el-main style="overflow-y: auto; height: calc(100vh - 170px);">
            <component 
              :is="currentForm"
              ref="currentFormRef"
              :key="activeMenu" 
              v-if="formDataCache[activeMenu]"
              :initialData="formDataCache[activeMenu]"
              @update:formData="(data) => formDataCache[activeMenu] = data"
            />
          </el-main>
          
          <el-footer style="text-align: center; padding: 10px;">
            <el-button type="primary" @click="handleSave">保存草稿</el-button>
            <el-button type="primary" @click="handleUnsave">不保存退出</el-button>
            <!-- <dataInsertBtn></dataInsertBtn> -->
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onBeforeMount } from 'vue'
const emit = defineEmits(['hide-form'])
import { useResumeStore } from '../store/resume'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import EducationForm from './Forms/EducationForm.vue'
import WorkExperienceForm from './Forms/WorkExperienceForm.vue'
import JobObjectiveForm from './Forms/JobObjectiveForm.vue'
import ProjectExperienceForm from './Forms/ProjectExperienceForm.vue'
import SkillsForm from './Forms/SkillsForm.vue'
import BasicInfoForm from './Forms/BasicInfoForm.vue'
import AwardsForm from './Forms/AwardsForm.vue'
import CampusExperienceForm from "./Forms/CampusExperienceForm.vue";
import dataInsertBtn from "./TestDataButton.vue";

const router = useRouter()
const resumeStore = useResumeStore()
const activeMenu = ref('basic')

const menuItems = ref([
  { label: '基本信息', value: 'basic' },
  { label: '教育背景', value: 'education' },
  { label: '工作经历', value: 'workExperience' },
  { label: '项目经验', value: 'projects' },
  { label: '获奖状况', value: 'awards' },
  { label: '校园经历', value: 'campusExperience' },
  { label: '求职意向', value: 'jobObjectives' },
  { label: '技能特长', value: 'skills' }
])

const formComponents = {
  basic: BasicInfoForm,
  education: EducationForm,
  workExperience: WorkExperienceForm,
  projects: ProjectExperienceForm,
  awards: AwardsForm,
  campusExperience: CampusExperienceForm,
  jobObjectives: JobObjectiveForm,
  skills: SkillsForm,
}

const currentForm = computed(() => {
  return formComponents[activeMenu.value] || null
})

const formDataCache = ref({})
const currentFormRef = ref(null)

// 组件挂载前加载Profile数据
onBeforeMount(async () => {
  await resumeStore.loadProfile()
  if (resumeStore.profile) {
    formDataCache.value = {
      basic: resumeStore.profile.basic,
      education: resumeStore.profile.education,
      workExperience: resumeStore.profile.workExperience,
      projects: resumeStore.profile.projects,
      skills: resumeStore.profile.skills,
      campusExperience: resumeStore.profile.campusExperience,
      jobObjectives: resumeStore.profile.jobObjectives,
      awards: resumeStore.profile.awards
    }
  }else{
    formDataCache.value = {
      basic:{},
      education:[],
      workExperience:[],
      projects:[],
      skills:[],
      campusExperience:[],
      jobObjectives:[],
      awards:[],
    }
    
  }
  console.log(formDataCache.value);
  
})

const handleMenuSelect = async (index) => {
  const formData = await currentFormRef.value.getFormData()
  
  formDataCache.value[activeMenu.value] = formData
  activeMenu.value = index
}

const handleSave = async () => {
  if (currentFormRef.value) {
    const formData = await currentFormRef.value.getFormData()
    formDataCache.value[activeMenu.value] = formData
  }
  console.log(formDataCache.value)
  resumeStore.saveAllFormData(formDataCache.value)

  ElMessage.success('草稿保存成功')
  
  // 触发父组件隐藏表单
  emit('hide-form')
}
const handleUnsave = ()=>{
  emit('hide-form')
}


</script>

<style scoped>
.common-layout {
  width: 70vw;
  min-width: 800px;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 0;
  margin-top: 20px;
  background-color: #fff;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
